<template>
  <div class="ptc-recovery-container">
    <div class="ptc-recovery-flow">
      <h4>PTC故障恢复流程</h4>
      <div class="main-container">
        <div class="flow-container">
          <template v-for="(step, index) in recoveryStore.steps" :key="index">
            <!-- 步骤项 -->
            <div
              class="flow-step"
              :class="{
                'step-active': index + 1 === recoveryStore.currentStep,
                'step-completed': recoveryStore.steps[index].completed,
                'step-disabled': !isStepEnabled(index + 1),
              }"
              @click="handleStepClick(index + 1)"
              :style="{
                cursor: isStepEnabled(index + 1) ? 'pointer' : 'not-allowed',
              }"
            >
              <div class="step-number">{{ index + 1 }}</div>
              <div class="step-content">
                <h5>{{ step.title }}</h5>
                <p>{{ step.description }}</p>
              </div>
            </div>

            <!-- 流程箭头 -->
            <div
              class="flow-arrow"
              v-if="index < recoveryStore.steps.length - 1"
            >
              <svg width="20" height="40" viewBox="0 0 20 40">
                <line
                  x1="10"
                  y1="0"
                  x2="10"
                  y2="30"
                  stroke="#10b981"
                  stroke-width="2"
                />
                <polygon points="5,30 10,40 15,30" fill="#10b981" />
              </svg>
            </div>
          </template>
        </div>
      </div>
    </div>

    <!-- 步骤一提示对话框 -->
    <div
      v-if="showStepOneDialog"
      class="dialog-overlay"
      @click="closeStepOneDialog"
    >
      <div class="dialog-content" @click.stop>
        <h5>检查发电机面板</h5>
        <p>请在发电机面板上查看发电机定子绕组温度。</p>
        <div class="temperature-preview">
          <h6>当前定子绕组温度预览</h6>
          <div class="temperature-grid">
            <div
              class="temperature-item"
              v-for="(temp, index) in currentTemperatures"
              :key="index"
            >
              <span class="temperature-label">温度{{ index + 1 }}:</span>
              <span class="temperature-value">{{ temp }} °C</span>
            </div>
          </div>
        </div>
        <div class="dialog-buttons">
          <button class="cancel-button" @click="closeStepOneDialog">
            取消
          </button>
          <button class="confirm-button" @click="openGeneratorPanel">
            打开发电机面板
          </button>
        </div>
      </div>
    </div>

    <!-- 端子排对话框 -->
    <div
      v-if="showTerminalBlockDialog"
      class="dialog-overlay"
      @click="closeTerminalBlockDialog"
    >
      <div class="terminal-dialog-content" @click.stop>
        <h5>检查PTC接线</h5>
        <div class="terminal-container">
          <div class="terminal-content-wrapper">
            <!-- 端子排图片 -->
            <div class="terminal-image-container">
              <div
                class="terminal-image-wrapper"
                @mouseover="handleTerminalMouseOver"
                @mouseout="handleTerminalMouseOut"
              >
                <img
                  src="@/assets/terminal_block.png"
                  alt="端子排"
                  class="terminal-image"
                />
                <!-- x7区域 -->
                <div
                  class="x7-area"
                  @mouseenter="showMeasurementTooltip = true"
                  @mouseleave="showMeasurementTooltip = false"
                  @click="performMeasurement"
                >
                  <!-- 测量提示 -->
                  <div
                    v-if="showMeasurementTooltip"
                    class="measurement-tooltip"
                  >
                    测量
                  </div>
                </div>
              </div>
            </div>

            <!-- 各元件引出线对应端子示意图 -->
            <div class="terminal-instructions">
              <h6>各元件引出线对应端子示意图</h6>
              <div class="instructions-scroll">
                <div class="instruction-item">
                  <img
                    src="@/assets/terminal_block_instruct01.png"
                    alt="端子示意图1"
                    class="instruction-image"
                  />
                  <p>示意图1：各端子基本分布</p>
                </div>
                <div class="instruction-item">
                  <img
                    src="@/assets/terminal_block_instruct02.png"
                    alt="端子示意图2"
                    class="instruction-image"
                  />
                  <p>示意图2：PTC接线端子</p>
                </div>
                <div class="instruction-item">
                  <img
                    src="@/assets/terminal_block_instruct03.png"
                    alt="端子示意图3"
                    class="instruction-image"
                  />
                  <p>示意图3：整流模块</p>
                </div>
              </div>
            </div>
          </div>

          <!-- 万用表组件 -->
          <div class="multimeter-container">
            <MultimeterComponent
              ref="multimeterRef"
              :measurementValue="measurementValue"
            />
          </div>
        </div>
        <div class="dialog-buttons">
          <button class="cancel-button" @click="closeTerminalBlockDialog">
            关闭
          </button>
        </div>
      </div>
    </div>

    <!-- PTC参数测量弹窗（端子排对话框形式） -->
    <div
      v-if="showPTCParamDialog"
      class="dialog-overlay"
      @click="closePTCParamDialog"
    >
      <div class="terminal-dialog-content" @click.stop>
        <h5>测量PTC参数</h5>
        <div class="terminal-container">
          <div class="terminal-content-wrapper">
            <!-- 端子排图片 -->
            <div class="terminal-image-container">
              <div
                class="terminal-image-wrapper"
                @mouseover="handleTerminalMouseOver"
                @mouseout="handleTerminalMouseOut"
              >
                <img
                  src="@/assets/terminal_block.png"
                  alt="端子排"
                  class="terminal-image"
                />
                <!-- x7区域 -->
                <div
                  class="x7-area"
                  @mouseenter="showMeasurementTooltip = true"
                  @mouseleave="showMeasurementTooltip = false"
                  @click="performPTCParamMeasurement"
                >
                  <!-- 测量提示 -->
                  <div
                    v-if="showMeasurementTooltip"
                    class="measurement-tooltip"
                  >
                    测量PTC参数
                  </div>
                </div>
              </div>
            </div>

            <!-- 各元件引出线对应端子示意图 -->
            <div class="terminal-instructions">
              <h6>各元件引出线对应端子示意图</h6>
              <div class="instructions-scroll">
                <div class="instruction-item">
                  <img
                    src="@/assets/terminal_block_instruct01.png"
                    alt="端子示意图1"
                    class="instruction-image"
                  />
                  <p>示意图1：各端子基本分布</p>
                </div>
                <div class="instruction-item">
                  <img
                    src="@/assets/terminal_block_instruct02.png"
                    alt="端子示意图2"
                    class="instruction-image"
                  />
                  <p>示意图2：PTC接线端子</p>
                </div>
                <div class="instruction-item">
                  <img
                    src="@/assets/terminal_block_instruct03.png"
                    alt="端子示意图3"
                    class="instruction-image"
                  />
                  <p>示意图3：整流模块</p>
                </div>
              </div>
            </div>
          </div>

          <!-- 万用表组件 -->
          <div class="multimeter-container">
            <MultimeterComponent
              ref="multimeterRef"
              :measurementValue="measurementValue"
            />
          </div>
        </div>
        <div class="dialog-buttons">
          <button class="cancel-button" @click="closePTCParamDialog">
            关闭
          </button>
        </div>
      </div>
    </div>

    <!-- 重新接线成功弹窗 -->
    <div
      v-if="showRewireDialog"
      class="dialog-overlay"
      @click="
        () => {
          if (!isRewiring.value) {
            showRewireDialog = false;
          }
        }
      "
    >
      <div class="dialog-content" @click.stop>
        <h5>重新接线</h5>
        <p>请尝试重新连接PTC接线，确保连接牢固。</p>
        <div class="dialog-buttons">
          <button
            class="cancel-button"
            @click="
              () => {
                if (!isRewiring.value) {
                  showRewireDialog = false;
                }
              }
            "
            :disabled="isRewiring.value"
          >
            取消
          </button>
          <button
            class="confirm-button"
            @click="handleRewireDialogClose"
            :disabled="isRewiring"
          >
            <span v-if="isRewiring" class="loading-spinner"></span>
            {{ isRewiring ? "重新接线中..." : "重新接线" }}
          </button>
        </div>
      </div>
    </div>

    <!-- 温度曲线弹窗 -->
    <div
      v-if="showTrendChartDialog"
      class="dialog-overlay"
      @click="handleTrendChartClose"
    >
      <div class="dialog-content chart-dialog" @click.stop>
        <h5>查看定子绕组温度曲线</h5>
        <div class="chart-container">
          <TrendChart />
        </div>
        <div class="dialog-buttons">
          <button class="confirm-button" @click="handleTrendChartClose">
            完成查看
          </button>
        </div>
      </div>
    </div>
    
    <!-- 更换备用PTC确认弹窗 -->
    <div
      v-if="showReplacePTCConfirmDialog"
      class="dialog-overlay"
      @click="showReplacePTCConfirmDialog = false"
    >
      <div class="dialog-content" @click.stop>
        <h5>更换备用PTC</h5>
        <p>确定要更换备用PTC组件吗？此操作将重置PTC系统状态。</p>
        <div class="dialog-buttons">
          <button 
            class="cancel-button" 
            @click="showReplacePTCConfirmDialog = false"
            :disabled="isReplacing"
          >
            取消
          </button>
          <button 
            class="confirm-button" 
            @click="confirmReplacePTC"
            :disabled="isReplacing"
          >
            <span v-if="isReplacing" class="loading-spinner"></span>
            {{ isReplacing ? '更换中...' : '确认更换' }}
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted, nextTick } from "vue";
import { ElMessage } from "element-plus";
import { setAlgorithmParam } from "@/api/util";
import { useUserStore } from "@/store/user";
import { usePTCRecoveryStore } from "@/store/ptcRecoveryStore";
import TrendChart from "./TrendChart.vue";
import MultimeterComponent from "./MultimeterComponent.vue";
import StartModelWsService from "@/ws_service/startModelWsService";
import { useMultimeterStore } from "@/store/multimeterStore";

// 获取store实例
const userStore = useUserStore();
const recoveryStore = usePTCRecoveryStore();

// 定义emit
const emit = defineEmits(["openGeneratorPanel", "cancel"]);

// 获取万用表store实例
const multimeterStore = useMultimeterStore();

// 状态变量
const isReplacing = ref(false);
const isRewiring = ref(false);
const showRewireDialog = ref(false);
const showTrendChartDialog = ref(false);
const showPTCParamDialog = ref(false);
const showStepOneDialog = ref(false);
const showTerminalBlockDialog = ref(false);
const showReplacePTCConfirmDialog = ref(false);

// 检查步骤是否可点击的函数
const isStepEnabled = (stepNumber) => {
  // 第一步始终可点击
  if (stepNumber === 1) {
    return true;
  }

  // 对于其他步骤，需要前一步已完成
  for (let i = 0; i < stepNumber - 1; i++) {
    if (!recoveryStore.steps[i].completed) {
      return false;
    }
  }

  return true;
};

// 端子排相关状态
const showMeasurementTooltip = ref(false);
const measurementValue = ref(null);
const multimeterRef = ref(null);
const shouldUpdateMeasurement = ref(false); // 控制是否更新测量值的标志

// 当前温度参数
const currentTemperatures = reactive([95, 98, 102, 105]);

// 温度参数映射
const temperatureParamKeys = [
  "1_17_0_0", // 发电机定子绕组温度1
  "1_18_0_0", // 发电机定子绕组温度2
  "1_19_0_0", // 发电机定子绕组温度3
  "1_20_0_0", // 发电机定子绕组温度4
];

// PTC系统参数
const PTC_PARAM = "2_43_0_0";

// 关闭步骤一弹窗
const closeStepOneDialog = () => {
  showStepOneDialog.value = false;
};

// 打开发电机面板
const openGeneratorPanel = () => {
  recoveryStore.steps[0].completed = true;
  emit("openGeneratorPanel");
  showStepOneDialog.value = false;
  // 完成步骤一后自动跳转到步骤二
  recoveryStore.setCurrentStep(2);
};

// 处理WebSocket接收到的数据
const processWsData = (data) => {
  if (!data || typeof data !== "object") return;

  // 更新温度数据
  temperatureParamKeys.forEach((key, index) => {
    if (data[key] && Array.isArray(data[key]) && data[key].length > 0) {
      currentTemperatures[index] = parseFloat(
        data[key][data[key].length - 1].toFixed(2)
      );
    }
  });

  // 只有在需要更新测量值时才执行
  if (shouldUpdateMeasurement.value) {
    updateMeasurementValue(data);
  }
};

// 更新万用表测量值
const updateMeasurementValue = (data) => {
  if (!data) return;

  const currentMode = multimeterStore.getCurrentMode;

  switch (currentMode) {
    case "voltage":
      // 显示电压参数
      if (data["1_3_0_0"] && Array.isArray(data["1_3_0_0"])) {
        measurementValue.value = parseFloat(
          data["1_3_0_0"][data["1_3_0_0"].length - 1].toFixed(2)
        );
      }
      break;
    case "current":
      // 显示电流参数
      if (data["1_2_0_0"] && Array.isArray(data["1_2_0_0"])) {
        measurementValue.value = parseFloat(
          data["1_2_0_0"][data["1_2_0_0"].length - 1].toFixed(2)
        );
      }
      break;
    case "resistance":
      // 根据温度判断电阻值
      const maxTemperature = Math.max(...currentTemperatures);
      if (maxTemperature > 165) {
        measurementValue.value = "OL";
      } else {
        measurementValue.value = "80 Ω";
      }
      break;
  }

  // 完成一次测量后重置标志，防止持续更新
  setTimeout(() => {
    shouldUpdateMeasurement.value = false;
  }, 500);
};

// 关闭端子排对话框
const closeTerminalBlockDialog = () => {
  showTerminalBlockDialog.value = false;
  showMeasurementTooltip.value = false;
};

// 处理端子排鼠标悬停
const handleTerminalMouseOver = (event) => {
  // 可以在这里添加更多的悬停逻辑
};

// 处理端子排鼠标离开
const handleTerminalMouseOut = () => {
  showMeasurementTooltip.value = false;
};

// 执行测量
const performMeasurement = async () => {
  try {
    // 设置标志，允许更新测量值
    shouldUpdateMeasurement.value = true;

    // 模拟测量过程
    await nextTick();

    // 测量完成后设置步骤二为已完成
    recoveryStore.steps[1].completed = true;
    ElMessage.success("PTC接线检查完成");
  } catch (error) {
    console.error("测量失败:", error);
    ElMessage.error("测量失败，请重试");
    // 出错时也重置标志
    shouldUpdateMeasurement.value = false;
  }
};

// 处理步骤点击
const handleStepClick = (stepNumber) => {
  // 只有当步骤可用时才能点击
  if (!isStepEnabled(stepNumber)) {
    return;
  }

  recoveryStore.setCurrentStep(stepNumber);

  // 根据步骤显示相应的弹窗
  switch (stepNumber) {
    case 1:
      showStepOneDialog.value = true;
      break;
    case 2:
      // 检查PTC接线弹窗
      showTerminalBlockDialog.value = true;
      break;
    case 3:
      showRewireDialog.value = true;
      break;
    case 4:
      showTrendChartDialog.value = true;
      break;
    case 5:
      showPTCParamDialog.value = true;
      break;
    case 6:
      // 显示更换备用PTC确认弹窗
      showReplacePTCConfirmDialog.value = true;
      break;
  }
};

// 处理温度曲线弹窗关闭
const handleTrendChartClose = () => {
  recoveryStore.steps[3].completed = true;
  showTrendChartDialog.value = false;
};

// 生命周期钩子
onMounted(() => {
  StartModelWsService.onProcessedData(processWsData);
});

onUnmounted(() => {
  StartModelWsService.offProcessedData(processWsData);
});

// 确认更换备用PTC
const confirmReplacePTC = async () => {
  try {
    // 设置更换状态为true，显示加载动画
    isReplacing.value = true;
    
    // 显示1-2秒的转圈样式
    await new Promise((resolve) => setTimeout(resolve, 2000));
    
    // 执行实际的更换操作
    await replacePTCPart();
    
    // 关闭确认弹窗
    showReplacePTCConfirmDialog.value = false;
  } finally {
    // 无论成功失败，都重置加载状态
    isReplacing.value = false;
  }
};

// 更换备用PTC函数
const replacePTCPart = async () => {
  try {
    // 获取用户的copyNum
    const copyNum = userStore.copyNum || 5; // 默认值为5

    // 调用setAlgorithmParam接口设置PTC参数为1（正常状态）
    await setAlgorithmParam(PTC_PARAM, 1, copyNum);

    ElMessage.success("备用PTC更换成功，系统已恢复正常状态");
    recoveryStore.steps[5].completed = true;
    recoveryStore.completeCurrentStep();

    // 触发恢复完成事件
    emit("recovered", 1);
  } catch (error) {
    ElMessage.error("备用PTC更换失败，请重试");
    console.error("更换PTC组件出错:", error);
    throw error; // 抛出错误让调用者知道失败
  }
};

// 监听重新接线弹窗关闭
const handleRewireDialogClose = async () => {
  try {
    // 设置重新接线状态为true，显示加载动画
    isRewiring.value = true;

    // 模拟重新接线过程，1-2秒
    await new Promise((resolve) => setTimeout(resolve, 2000));

    // 标记步骤为已完成
    recoveryStore.steps[2].completed = true;

    // 关闭弹窗
    showRewireDialog.value = false;

    // 显示完成提示
    ElMessage.success("重新接线完成");
  } catch (error) {
    console.error("重新接线失败:", error);
    ElMessage.error("重新接线失败，请重试");
  } finally {
    // 无论成功失败，都重置状态
    isRewiring.value = false;
  }
};

// 关闭PTC参数测量弹窗
const closePTCParamDialog = () => {
  showPTCParamDialog.value = false;
  showMeasurementTooltip.value = false;
};

// 执行PTC参数测量
const performPTCParamMeasurement = async () => {
  try {
    // 设置标志，允许更新测量值
    shouldUpdateMeasurement.value = true;

    // 模拟测量过程
    await nextTick();

    // 测量完成后设置步骤为已完成
    recoveryStore.steps[4].completed = true;
    ElMessage.success("PTC参数测量完成");
  } catch (error) {
    console.error("PTC参数测量失败:", error);
    ElMessage.error("测量失败，请重试");
    // 出错时也重置标志
    shouldUpdateMeasurement.value = false;
  }
};
</script>

<style scoped>
.ptc-recovery-container {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  border-radius: 8px;
  color: #f1f5f9;
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.ptc-recovery-flow {
  background: #2c3e50;
  border-radius: 8px;
  padding: 24px;
  color: #ecf0f1;
  min-width: 300px;
  flex: 1;
}

.ptc-recovery-flow h4 {
  color: #10b981;
  margin-top: 0;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #34495e;
  font-size: 18px;
  font-weight: 600;
}

.main-container {
  display: flex;
  gap: 20px;
  min-height: 400px;
}

.flow-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.flow-step {
  display: flex;
  align-items: center;
  gap: 15px;
  background: #34495e;
  padding: 15px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.flow-step:hover {
  background: #3e5771;
  transform: translateX(5px);
}

.flow-step.step-completed {
  border: 2px solid #27ae60;
  background: #293a4b;
}

.flow-step.step-active {
  background: #3e5771;
  border-left: 4px solid #10b981;
}

.flow-step.step-disabled {
  opacity: 0.5;
  cursor: not-allowed !important;
}

.flow-step.step-disabled:hover {
  background: #34495e;
  transform: none;
}

.step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: #10b981;
  color: white;
  border-radius: 50%;
  font-weight: bold;
  font-size: 16px;
  flex-shrink: 0;
}

.step-content {
  flex: 1;
}

.step-content h5 {
  margin: 0 0 5px 0;
  font-size: 16px;
  color: #10b981;
}

.step-content p {
  margin: 0;
  font-size: 14px;
  color: #bdc3c7;
}

.flow-arrow {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
}

/* 对话框样式 */
.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.dialog-content {
  background: #2c3e50;
  border-radius: 8px;
  padding: 24px;
  max-width: 500px;
  width: 90%;
  color: #ecf0f1;
}

.dialog-content h5 {
  margin-top: 0;
  margin-bottom: 15px;
  color: #10b981;
  font-size: 18px;
}

.dialog-content p {
  margin-bottom: 20px;
  line-height: 1.6;
}

.dialog-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

.cancel-button,
.confirm-button {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.3s ease;
}

.cancel-button {
  background: #7f8c8d;
  color: white;
}

.cancel-button:hover {
  background: #95a5a6;
}

.confirm-button {
  background: #27ae60;
  color: white;
}

.confirm-button:hover {
  background: #2ecc71;
}

.confirm-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.loading-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 8px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: white;
  animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* 温度预览样式 */
.temperature-preview {
  background: #34495e;
  padding: 15px;
  border-radius: 6px;
  margin: 15px 0;
}

.temperature-preview h6 {
  margin-top: 0;
  margin-bottom: 10px;
  color: #3498db;
  font-size: 14px;
}

.temperature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.temperature-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}

.temperature-label {
  color: #bdc3c7;
}

.temperature-value {
  color: #e67e22;
  font-weight: bold;
}

/* 端子排对话框样式 */
.terminal-dialog-content {
  background: #2c3e50;
  border-radius: 8px;
  padding: 24px;
  max-width: 90%;
  width: 1200px;
  max-height: 90vh;
  overflow: auto;
  color: #ecf0f1;
}

.terminal-container {
  display: flex;
  gap: 30px;
  align-items: flex-start;
}

.terminal-content-wrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1;
}

.terminal-image-container {
  flex: 1;
  overflow-x: auto;
  overflow-y: hidden; /* 隐藏垂直滚动条 */
  height: 300px; /* 增加容器高度 */
}

.terminal-image-wrapper {
  position: relative;
  min-width: 600px;
  height: 100%; /* 让包装器占满容器高度 */
  display: flex;
  align-items: center;
}

.terminal-image {
  width: 200%; /* 设置宽度为容器的200%，强制出现水平滚动条 */
  height: auto;
  max-height: none;
  border: 2px solid #34495e;
  border-radius: 4px;
  transform: scale(1); /* 保持原始缩放 */
}

/* x7区域 */
.x7-area {
  position: absolute;
  top: 31%;
  left: 103.5%;
  width: 148px;
  height: 50px;
  background: rgba(255, 255, 255, 0.1);
  border: 2px dashed #3498db;
  cursor: pointer;
  transition: all 0.3s ease;
}

.x7-area:hover {
  background: rgba(52, 152, 219, 0.3);
}

/* 测量提示 */
.measurement-tooltip {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  background: #2c3e50;
  color: #3498db;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 14px;
  white-space: nowrap;
  z-index: 1001;
}

.measurement-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #2c3e50;
}

/* 万用表容器 */
.multimeter-container {
  flex-shrink: 0;
  width: 400px;
}

/* 各元件引出线对应端子示意图样式 */
.terminal-instructions {
  background: #34495e;
  border-radius: 6px;
  padding: 15px;
}

.terminal-instructions h6 {
  margin-top: 0;
  margin-bottom: 15px;
  color: #3498db;
  font-size: 16px;
}

.instructions-scroll {
  max-height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.instruction-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.instruction-image {
  width: 100%;
  height: auto;
  border: 1px solid #4a5f7a;
  border-radius: 4px;
  margin-bottom: 10px;
}

.instruction-item p {
  margin: 0;
  color: #ecf0f1;
  font-size: 14px;
}

/* 自定义滚动条样式 */
.instructions-scroll::-webkit-scrollbar {
  width: 8px;
}

.instructions-scroll::-webkit-scrollbar-track {
  background: #2c3e50;
  border-radius: 4px;
}

.instructions-scroll::-webkit-scrollbar-thumb {
  background: #7f8c8d;
  border-radius: 4px;
}

.instructions-scroll::-webkit-scrollbar-thumb:hover {
  background: #95a5a6;
}

/* 图表弹窗样式 */
.chart-dialog {
  max-width: 900px;
  width: 80%;
}

.chart-container {
  margin: 20px 0;
  background: #34495e;
  border-radius: 6px;
  padding: 15px;
  min-height: 400px;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .terminal-container {
    flex-direction: column;
  }

  .multimeter-container {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
  }

  .instruction-image {
    max-width: 100%;
  }
}

/* 弹窗样式 */
.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.dialog-content {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  border-radius: 8px;
  padding: 24px;
  max-width: 400px;
  width: 90%;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  border: 1px solid #334155;
}

.dialog-content h5 {
  margin: 0 0 16px 0;
  color: #a855f7;
  font-size: 18px;
  font-weight: 600;
}

.dialog-content p {
  margin: 0 0 20px 0;
  color: #cbd5e1;
  line-height: 1.6;
}

.temperature-preview {
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  padding: 16px;
  margin-bottom: 20px;
}

.temperature-preview h6 {
  margin: 0 0 12px 0;
  color: #94a3b8;
  font-size: 14px;
  font-weight: 500;
}

.temperature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.temperature-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background-color: rgba(255, 255, 255, 0.03);
  border-radius: 4px;
  font-size: 13px;
}

.temperature-label {
  color: #cbd5e1;
}

.temperature-value {
  color: #a855f7;
  font-weight: 600;
  font-family: "Courier New", monospace;
}

.dialog-buttons {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 24px;
}

.dialog-buttons button {
  padding: 8px 20px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
}

.cancel-button {
  background-color: transparent;
  border: 1px solid #64748b;
  color: #cbd5e1;
}

.cancel-button:hover {
  background-color: #334155;
  border-color: #94a3b8;
  color: #f8fafc;
}

.confirm-button {
  background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%);
  color: white;
  border: none;
}

.confirm-button:hover {
  background: linear-gradient(135deg, #9333ea 0%, #7e22ce 100%);
}

.confirm-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .ptc-recovery-container {
    padding: 15px;
  }

  .step-content {
    padding: 15px;
  }

  .action-buttons {
    flex-direction: column;
  }

  .navigation-buttons {
    flex-direction: column-reverse;
    gap: 10px;
  }

  .dialog-content {
    margin: 20px;
    padding: 20px;
  }

  .temperature-grid {
    grid-template-columns: 1fr;
  }

  .dialog-buttons {
    flex-direction: column;
  }

  .dialog-buttons button {
    width: 100%;
  }
}
</style>